<template>
    <div class="box" :style="showWithForm ? 'padding-bottom:0px' : ''">
        <template v-if="!showWithForm">

            <heads></heads>
            <titlesearch></titlesearch>
            <div class="gerenBox">
                <ceList :index="33" class="geren"></ceList>
                <div class="con">
                    <!-- <div @click="click" style="color:#333;">
                点击触发
            </div> -->

                    <div class="memberShipTitle">
                        <div :class="curIndex == 1 ? 'xuan' : ''" @click="tabClick(1)">礼品管理</div>
                        <div :class="curIndex == 2 ? 'xuan' : ''" @click="tabClick(2)">员工管理</div>
                    </div>

                    <div class="memberShipSubTitle" v-if="curIndex == 1">
                        <div :class="curSubIndex == 1 ? 'xuan' : ''" style="margin-right: 54px;" @click="tabSubClick(1)">
                            礼品库存</div>
                        <div :class="curSubIndex == 2 ? 'xuan' : ''" @click="tabSubClick(2)">领取记录</div>
                    </div>
                    <div class="giftStockWrap" v-if="curIndex == 1 && curSubIndex == 1">
                        <div class="giftStockItem" v-for="(item, index) in giftInventoryList" :key="index">
                            <img :src="item.giftInformation.giftPicture" alt="" class="giftImg">
                            <div class="giftInfo">
                                <div class="giftTitle line1">{{ item.giftInformation.giftName }}</div>
                                <div class="giftDetail">
                                    <div class="giftStock"><span>库存</span>{{ item.stock }}份</div>
                                    <div class="giftSended"><span>送出</span>{{ item.sendTotal }}份</div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="giftRecordWrap" v-if="curIndex == 1 && curSubIndex == 2">
                        <div class="giftRecordFilter">
                            <el-date-picker @change="selectTime" v-model="timeArr" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd">
                            </el-date-picker>
                            <el-select v-model="value" placeholder="请选择" :clearable='true' @clear='clear'
                                @change="selectType">
                                <el-option v-for="item in giftLists" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <!-- receivingRecordList -->
                        <div class="giftRecordItem" v-for="(item, index) in receivingRecordList" :key="index">
                            <div class="giftRecord1" style="width:220px;">
                                <div class="giftRecord2">
                                    <span>用户:</span>{{ item.receiverName }}
                                </div>
                                <div class="giftRecord2">
                                    <span>领取：</span>{{ item.giftName }}*{{ item.quantity }}
                                </div>
                            </div>
                            <div class="giftRecord1" style="width:310px;">
                                <div class="giftRecord2">
                                    <span>车牌号：</span>{{ item.licensePlateNumber }}
                                </div>
                                <div class="giftRecord2">
                                    <span>发放人：</span>{{ item.issuerName }}
                                </div>

                            </div>
                            <div class="giftRecord1"
                                style="width:150px;text-align: right; justify-content: end;white-space:nowrap;">
                                {{ item.recordTime }}
                            </div>
                        </div>
                    </div>

                    <div class="employeeManagement" v-if="curIndex == 2">
                        <el-button class="employeeManagementAdd" @click="showForm = true, resetData()">新增员工({{
                            employeesList.length }}/5)</el-button>
                        <!-- <button type="button" class="employeeManagementAdd">
                    
                </button> -->
                        <div class="employeeManagementTable">
                            <el-table :data="employeesList" @row-click="rowClick" height="417" style="width: 100%">
                                <el-table-column prop="fullName" label="员工姓名">
                                </el-table-column>
                                <el-table-column prop="cellphoneNumber" label="手机号">
                                </el-table-column>
                                <el-table-column prop="address" label="状态管理">
                                    <template slot-scope="scope">
                                        <button class="statusBtn" @click.stop="handleDelete(scope.$index, scope.row)">
                                            删除
                                        </button>

                                    </template>
                                </el-table-column>
                                <div slot="empty">
                                    <el-empty description="暂无数据"></el-empty>
                                </div>
                            </el-table>


                        </div>



                    </div>
                    <el-empty description="暂无数据" v-if="total == 0 && curIndex != 2"></el-empty>
                </div>
            </div>
        </template>

        <div class="bgmask" v-if="showForm" @click="showForm = false">
            <div class="employeeAdd" @click.stop>
                <img src="../../../assets/bbcz/employeeAddCancel@2x.png" alt="" class="employeeAddCloseIco"
                    @click="showForm = false">
                <div class="employeeAddTitle">{{ form.id ? '编辑员工' : '新增员工' }} </div>
                <div class="employeeAddForm">
                    <el-form ref="form" :model="form" label-width="85px">
                        <el-form-item class="employeeAddtem" label="员工姓名">
                            <el-input v-model="form.employeeName" placeholder="请输入员工姓名" maxlength="10"></el-input>
                        </el-form-item>
                        <el-form-item class="employeeAddtem" label="手机号">
                            <el-input v-model="form.employeePhone" placeholder="需填写员工帮帮同城注册手机号" type="number"
                                maxlength="11"></el-input>
                        </el-form-item>
                        <el-form-item class="employeeAddtem" label="验证码" type="number" maxlength="6">
                            <el-input v-model="form.verificationCode" placeholder="请输入验证码" type="number"
                                maxlength="6"></el-input>
                            <div class="verifyCode" @click.stop="getVerifyCode">{{ time > 0 ? time + 's后重新发送' : '获取验证码' }}
                            </div>
                        </el-form-item>
                    </el-form>
                    <div class="employeeAddFormBtn" @click.stop="submit">确认</div>
                </div>
            </div>
        </div>
        <floor></floor>
        <div class="con2" v-show="con2">
            <slide-verify class="verify" ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess"
                @fail="onFail" @refresh="onRefresh" :imgs="picArray" :slider-text="text">
                <!-- :accuracy="accuracy" -->
            </slide-verify>
            <i class="el-icon-circle-close" style="
            position: absolute;
            right: 39.5%;
            font-size: 40px;
            cursor: pointer;
            top: 39.4%;
          " @click="ycCon()"></i>
        </div>
    </div>
</template>

<script>
import floor from "../../../components/floor";
import heads from "../../../components/head";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
export default {
    props: {
        showWithForm: {
            type: Boolean,
            default: false
        }
    },
    components: {
        floor,
        heads,
        ceList,
        titlesearch,
    },
    data() {
        return {
            curIndex: 1,
            curSubIndex: 1,
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }],
            value: '',
            timeArr: [],
            tableData: [],
            collectCount: 1,
            collectPage: {
                pageNo: 1,
                pageSize: 10
            },
            form: {
                employeeName: "",
                employeePhone: "",
                verificationCode: "",
            },
            time: -1,
            timer: null,
            showForm: false,

            param: {
                pageNo: 1,
                pageSize: 8
            },
            loginstate: false,
            user: {},
            giftInventoryList: [],
            giftLists: [],
            receivingRecordList: [],
            employeesList: [],
            total: 0,
            reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
            code: '',
            employeeTitle: '增加员工',
            con2: false,
            text: '',
            picArray: [
                require("@/assets/verify/1.jpg"),
                require("@/assets/verify/2.jpg"),
                require("@/assets/verify/3.jpg"),
                require("@/assets/verify/4.jpg"),
                require("@/assets/verify/5.jpg"),
                require("@/assets/verify/6.jpg"),
            ],
            noClick: false
        }
    },
    created() {
        if (this.showWithForm) {
            // this.showForm = true
        } else {
            // console.log(this.getType([]));
            this.giftInventory()
            this.giftList()
            this.getEmployees()
        }
        this.getUser()


        // this.$msgBox.showMsgBox({
        //     title:'解除绑定',
        //     content: '确定要解绑车牌号鲁B 88088？',

        // }).then(async (val) => {
        //     console.log(val);
        // }).catch((err) => {
        //     console.log(err);
        // });

        // this.$msgBox.showMsgBox({

        //     content: '请打开手机端进行操作',
        //     isShowCancelBtn:false,
        // }).then(async (val) => {
        //     console.log(val);
        // }).catch((err) => {
        //     console.log(err);
        // });
    },
    methods: {
        open() {
            this.showForm = true
        },
        repeat(target, n) {
            return (new Array(n + 1)).join(target);
        },
        rowClick(row, column, event) {
            console.log(row, column);
            this.form = {
                id: row.id,
                employeeName: row.fullName,
                employeePhone: row.cellphoneNumber,
            }
            setTimeout(() => {
                this.showForm = true
            }, 100)
        },
        submit() {
            var checkStatus = this.checkData(this.form, {
                employeeName: { tip: "请填写姓名" },
                employeePhone: { validator: this.employeePhoneValidate },
                verificationCode: { validator: this.verificationCodeValidate },
            })
            if (!checkStatus) return
            if (this.submitLoading) {
                return
            }
            this.submitLoading = true
            let data = {
                merchantId: this.user.merchantId || 1,
                id: this.form.id,
                fullName: this.form.employeeName,
                cellphoneNumber: this.form.employeePhone,
                SMS_VerificationCode: this.form.verificationCode,
            };
            this.$postHttp("/api/mobile/vehicleOwner/increaseOrModifyMerchantStatff", data).then(res => {
                this.mySuccessMessage(res.msg)
                this.showForm = false
                if (this.showWithForm) {
                    this.$bus.$emit('getEmployeesRe')
                } else {
                    this.getEmployees()

                }

            });
        },
        resetData() {
            this.form = {
                id: '',
                employeeName: '',
                employeePhone: '',
            }
        },
        employeePhoneValidate() {
            if (this.form.employeePhone == this.user.phone) {
                this.myErrorMessage("您已是商家身份不能将自己添加为员工，请更换！")
                return false
            }
            if (!this.reg_tel.test(this.form.employeePhone)) {
                this.myErrorMessage("请填写正确的手机号码")
                return false
            }
            return true
        },
        verificationCodeValidate() {
            if (!this.code || this.form.verificationCode != this.code) {
                this.myErrorMessage("验证码不正确，请重新填写")
                return false
            }
            return true
        },
        houseCurrentChange(e) {
            this.param.pageNo = e || 1
        },
        getUser() {
            let user = JSON.parse(localStorage.getItem("userInfo"));
            // await this.getMultiple()
            if (user != null) {
                this.loginstate = true;
                this.user = user;

            } else {
                this.loginstate = false;
                this.$message({
                    message: "请登录！",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
                this.$router.push("/");
            }
        },
        getVerifyCode() {
            if (this.noClick) { return }

            this.form.employeePhone = this.form.employeePhone.trim();
            if (!this.reg_tel.test(this.form.employeePhone)) {
                this.myErrorMessage("请填写正确的手机号码")
                return;
            }

            this.con2 = true;
            this.handleClick()
        },
        onSuccess() {

            this.con2 = false;

            if (this.noClick) { return }
            this.noClick = true

            this.$getHttp("/mob/login/phoneVerification.do", {
                phone: this.form.employeePhone,
                type: 1
            })
                .then(res => {
                    this.mySuccessMessage("发送验证码成功")
                    this.code = res.CODE;
                    this.startTimer(60)
                });
        },
        startTimer(time) {

            this.time = time
            this.timer = setInterval(() => {
                if (this.time < 0) {
                    this.noClick = false
                    clearInterval(this.timer)
                }
                this.time--
            }, 1000)
        },

        collectCurrentChange(e) {
            this.collectPage.pageNo = e
        },
        handleDelete(i, row) {
            let that = this
            this.$confirm('此操作将删除会员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$postHttp("/api/mobile/vehicleOwner/deleteEmployeeByIds", {
                    ids: row.id
                }).then((res) => {
                    that.mySuccessMessage(res.msg)
                    that.getEmployees()
                })
            }).catch(() => {

            });
            return false
            console.log(i, row);
        },
        selectTime() {
            // console.log("selectTime",this.timeArr);
            // console.log(this.formatTime('yyyy-MM-dd',this.timeArr[0]));
            this.receivingRecord()
        },
        selectType() {
            this.receivingRecord()
        },
        clear() {
            this.receivingRecord()
        },
        tabSubClick(i) {
            this.curSubIndex = i
            this.total = -1
            if (this.curIndex == 1) {
                if (this.curSubIndex == 1) {
                    this.giftInventory()
                } else {
                    this.receivingRecord()
                }
            }
        },
        tabClick(i) {
            this.curIndex = i
            this.tabSubClick(this.curSubIndex)
        },
        click() {
            this.$msgBox.showMsgBox({
                title: '添加分类',
                content: '请填写分类名称',
                isShowInput: true
            }).then(async (val) => {
                console.log(val);
            }).catch((err) => {
                console.log(err);
            });
        },
        // 获取礼品库存
        giftInventory() {
            console.log("111");
            let that = this;
            this.$getHttp("/api/mobile/vehicleOwner/getGiftInventory", {
                merchantId: this.user.merchantId || 1
            }).then(res => {
                // this.giftInventoryList = [...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList,...res.merchantGiftDistribution.pageList];
                this.giftInventoryList = res.merchantGiftDistribution.pageList;
                this.total = res.merchantGiftDistribution.pageCount;
            });
        },
        // 获取领取记录信息列表
        receivingRecord() {
            console.log(this.timeArr);
            let that = this;
            this.$getHttp("/api/mobile/vehicleOwner/getReceivingRecords", {
                distributors: this.user.merchantId || 1,
                recordStartTime: this.timeArr && this.timeArr[0] ? this.formatTime('yyyy-MM-dd', this.timeArr[0]) : "",
                recordEndTime: this.timeArr && this.timeArr[1] ? this.formatTime('yyyy-MM-dd', this.timeArr[1]) : "",
                giftId: this.value
            }).then(res => {
                // this.receivingRecordList = [...res.giftReceiveRecordList.pageList,...res.giftReceiveRecordList.pageList,...res.giftReceiveRecordList.pageList,...res.giftReceiveRecordList.pageList,...res.giftReceiveRecordList.pageList,...res.giftReceiveRecordList.pageList,...res.giftReceiveRecordList.pageList];
                this.receivingRecordList = res.giftReceiveRecordList.pageList;
                this.total = res.giftReceiveRecordList.pageCount;
            });
        },
        // 获取礼品列表
        giftList() {
            let that = this;
            this.$getHttp("/api/mobile/vehicleOwner/getAllGiftLists", {
                merchantId: this.user.merchantId || 1
            }).then(res => {
                let arr = []
                res.GiftLists.pageList.forEach(v => {
                    arr.push({ value: v.giftId, label: v.giftInformation.giftName })
                })

                this.giftLists = arr;
            });
        },
        // 获取员工信息
        getEmployees() {
            let that = this;
            this.$getHttp("/api/mobile/vehicleOwner/getMerchantStaffList", {
                merchantId: this.user.merchantId || 1
            }).then(res => {
                this.submitLoading = false
                res.merchantStaffs.forEach(v => {
                    v.active = false
                })

                // console.log(res.merchantStaffs);
                // console.log(JSON.stringify(this.repeat(...res.merchantStaffs,0),null,2));
                // this.employeesList = [...res.merchantStaffs,...res.merchantStaffs,...res.merchantStaffs,...res.merchantStaffs,...res.merchantStaffs,...res.merchantStaffs,...res.merchantStaffs];
                this.employeesList = res.merchantStaffs
                this.total = res.merchantStaffs.length
            });
        },
        checkData(sourceObj, operation, option) {
            var status = true;
            var value;
            var type;
            var ignoreList = option ? option.ignore || [] : []
            for (const key in operation) {
                if (status && !ignoreList.includes(key)) {
                    if (operation[key].validator) {
                        status = operation[key].validator() || false
                        console.log("status", status);
                    } else {
                        type = Object.prototype.toString.call(sourceObj[key]);
                        value = sourceObj[key];
                        if (type == "[object Array]") {
                            if (value.length <= 0 && operation[key]) {
                                status = false;
                                operation[key] &&
                                    operation[key].tip &&
                                    this.myErrorMessage(operation[key].tip);
                            }
                        } else if (type == "[object String]") {
                            console.log("valuevaluevaluevaluevaluevalue", value);
                            if (!(value != "") && operation[key]) {
                                status = false;
                                operation[key] &&
                                    operation[key].tip &&
                                    this.myErrorMessage(operation[key].tip);
                            }
                        }
                    }

                }
            }
            return status;
        },
        ycCon() {
            this.con2 = false;
        },
        onFail() {
            console.log("验证不通过");
            this.msg = "";
        },
        onRefresh() {
            console.log("点击了刷新小图标");
            this.msg = "";
        },
        onFulfilled() {
            console.log("刷新成功啦！");
        },
        onAgain() {
            console.log("检测到非人为操作的哦！");
            this.msg = "try again";
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
            // 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset();
        },
    }
}
</script>

<style lang='less' scoped>
.employeeManagementTable {
    cursor: pointer;
}

.box {
    position: relative;
    padding-bottom: 200px;

    .gerenBox {
        width: 1200px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 32px;
        margin-bottom: 45px;

        .geren {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 240px;
            min-height: 820px;
            margin-right: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            overflow: hidden;
        }

        .con {
            display: inline-block;
            box-sizing: border-box;
            vertical-align: top;
            width: 940px;
            color: #333;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            min-height: 940px;
            padding-bottom: 32px;

            .memberShipTitle {
                display: flex;
                padding: 23px 34px;
                color: #64B6A8;
                font-size: 20px;
                font-weight: 400;
                min-height: 81px;
                align-items: center;
                border: 1px solid #E0E0E0;
                box-sizing: border-box;

                div {
                    margin-right: 54px;
                    cursor: pointer;
                }

                .xuan {
                    // transform: scale(1.3);
                    // transform-origin: left;
                    font-size: 26px;
                    font-weight: 600;
                }
            }

            .memberShipSubTitle {
                margin: 24px auto;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                font-weight: 400;
                color: #ADADAD;

                div {

                    cursor: pointer;
                }

                .xuan {
                    font-weight: 500;
                    color: #64B6A8;
                }
            }

            .giftStockWrap {
                padding-left: 106px;
                display: flex;
                flex-wrap: wrap;
                max-height: 650px;
                overflow: auto;

                .giftStockItem {
                    width: 348px;
                    height: 109px;
                    background: #FFFFFF;
                    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.16);
                    border-radius: 12px 12px 12px 12px;
                    opacity: 1;
                    display: flex;
                    padding: 11px 10px 9px 12px;
                    box-sizing: border-box;
                    margin-bottom: 22px;
                    margin-right: 30px;

                    .giftImg {
                        width: 126px;
                        height: 89px;
                        border-radius: 6px 6px 6px 6px;
                        overflow: hidden;
                    }

                    .giftInfo {
                        margin-left: 16px;
                        max-width: 184px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 89px;
                        box-sizing: border-box;
                        padding: 5px 0;

                        .giftTitle {
                            font-size: 15px;
                            font-weight: 500;
                            color: #333333;
                        }

                        .giftDetail {
                            font-size: 14px;
                            font-weight: 400;
                            color: #333333;
                            display: flex;
                            flex-direction: column;
                            width: 100%;

                            .giftStock {
                                margin-bottom: 3px;
                            }

                            .giftSended {}

                            span {
                                color: #999999;
                                margin-right: 13px;
                            }
                        }
                    }
                }
            }

            .giftRecordWrap {
                padding: 8px;
                display: flex;
                flex-wrap: wrap;

                align-items: center;
                justify-content: center;

                .giftRecordFilter {
                    padding-bottom: 16px;

                    /deep/.el-range-editor.is-active,
                    .el-range-editor.is-active:hover {
                        color: #999999;
                    }

                    /deep/.el-input__inner {
                        border: 1px solid #999999;
                        border-radius: 4px;
                    }
                }

                .giftRecordItem {
                    margin: auto 128px;
                    padding: 18px 6px;
                    border-bottom: 1px solid #E0E0E0;
                    display: flex;
                    max-height: 425px;
                    overflow: auto;

                    .giftRecord1 {
                        height: 48px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        font-size: 15px;
                        font-weight: 400;
                        color: #64B6A8;

                        span {
                            color: #64B6A8;
                        }
                    }
                }
            }

            .employeeManagement {
                .employeeManagementAdd {
                    text-align: center;
                    width: 150px;
                    height: 36px;
                    line-height: 10px;
                    background: #FFFFFF;
                    border-radius: 6px 6px 6px 6px;
                    opacity: 1;
                    border: 1px solid #64B6A8;
                    font-size: 16px;
                    font-weight: 400;
                    color: #64B6A8;
                    margin-left: 684px;
                    margin-top: 20px;
                }

                .employeeManagementTable {
                    padding: 0 155px;
                    padding-top: 10px;
                    padding-bottom: 20px;

                    /deep/.el-table__body-wrapper .cell,
                    /deep/.el-table__header-wrapper .cell {
                        text-align: center;
                    }

                    /deep/.el-table__row {
                        height: 68px;
                    }

                    /deep/.el-table__header-wrapper {
                        .el-table__cell {
                            padding-top: 21px;
                            padding-bottom: 31px;

                            .cell {
                                font-size: 22px;
                                font-weight: 500;
                                color: #333333;
                            }

                        }
                    }

                    /deep/.el-table__body-wrapper {
                        tr {
                            &:hover {
                                background: #F4F4F4 !important;
                                border-radius: 6px 6px 6px 6px !important;
                            }

                            &:nth-child(odd) {
                                background: #F4F4F4 !important;
                                border-radius: 6px 6px 6px 6px !important;
                            }
                        }

                        .cell {
                            font-size: 19px;
                            font-weight: 400;
                            color: #333333;
                        }
                    }

                    // tr
                    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                        background-color: #64b6a8;
                    }

                    .statusBtn {
                        width: 70px;
                        height: 32px;
                        background: #64B6A8;
                        border-radius: 6px 6px 6px 6px;
                        opacity: 1;
                        font-size: 16px;
                        line-height: 32px;
                        font-weight: 400;
                        color: #FFFFFF;
                    }

                    .fenye {
                        width: 100%;
                        text-align: center;
                        margin-bottom: 50px;

                    }
                }
            }
        }
    }
}

.bgmask {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(51, 51, 51, 0.52);
    z-index: 999;

    .employeeAdd {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 548px;
        height: 387px;
        background: #FFFFFF;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid #707070;

        .employeeAddCloseIco {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 23px;
            height: 23px;
            cursor: pointer;
        }

        .employeeAddTitle {
            font-size: 24px;
            font-weight: 400;
            color: #000000;
            text-align: center;
            margin-top: 30px;
            margin-Bottom: 24px;
        }

        .employeeAddForm {
            padding: 0 86px;

            .employeeAddtem {
                position: relative;
                margin-bottom: 28px;

                /deep/.el-form-item__label {
                    font-size: 18px;
                    font-weight: 500;
                    color: #333333;
                    text-align: left;
                }

                /deep/.el-input {
                    input {
                        height: 44px;
                        line-height: 44px;
                        padding: 0 9px;
                        border-width: 0;
                        border-bottom: 1px solid #D0D0D0;
                        font-size: 18px;
                        color: #333333;
                    }
                }

                /* input 类型为 number 时去掉数字加减上下箭头 */
                /deep/input::-webkit-outer-spin-button,
                /deep/input::-webkit-inner-spin-button {
                    -webkit-appearance: none !important;
                }

                /deep/input[type="number"] {
                    -moz-appearance: textfield;
                    /* 此处写不写都可以 */
                }

                label {
                    font-size: 18px;
                    font-weight: 500;
                    color: #333333;
                }

                .verifyCode {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-52%);
                    right: 0;
                    text-align: center;
                    // width: 101px;
                    padding: 0 12px;
                    height: 32px;
                    line-height: 32px;
                    background: #FFFFFF;
                    border-radius: 4px 4px 4px 4px;
                    opacity: 1;
                    border: 1px solid #64B6A8;
                    font-size: 15px;
                    font-weight: 400;
                    color: #64B6A8;
                    cursor: pointer;
                }
            }

            .employeeAddFormBtn {
                margin: 0 auto;
                width: 155px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                background: #64B6A8;
                border-radius: 6px 6px 6px 6px;
                opacity: 1;
                font-size: 21px;
                font-weight: 400;
                color: #FFFFFF;
                margin-top: 30px;
            }

        }
    }
}

.con2 {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1000;

    .verify {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        /deep/.slide-verify-slider {
            border: 0;
            margin-top: -5px;
        }
    }
}
</style>